<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编程式导航</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <!-- 
        编程式导航代替声明式
        router-link属于声明式导航

     -->
    <div id="app">
        <h1>Hello,world</h1>
        <!-- 声明式导航使用router-link -->
        <router-link to="/user">声明式导航</router-link>
        <!-- 编程式导航使用$router进行添加跳转路径 -->
        <button @click="program">编程式导航</button>
        <router-view></router-view>
    </div>


    <script>
        const User = {
            template:`
            <div>用户</div>
            `
        };
        const routes = [
            {
                path:"/user",
                component:User,
                name:'username'
            }
        ];
        const router = new VueRouter({
            routes,
        })
        const app = new Vue({
            router,
            methods: {
                program(){
                    // 1.字符串 两种方式可以
                    // this.$router.push('/user')
                    // this.$router.push('user')

                    // 2.对象
                    // this.$router.push({
                    //     path:'user',
                    //     path:'/user',
                    // })

                    // 3.命名的路由  params是放在$route下的 did 为456
                    // this.$router.push({
                    //     name:"username",
                    //     params:{
                    //         did:456,
                    //     }
                    // })
                    // console.log(this.$route);

                    // 4.带查询参数，变成 .html#/user?id=123&name=小明
                    this.$router.push({
                        name:'username',
                        query:{
                            id:123,
                            name:"小明",
                        }
                    })
                    console.log(this.$route);
                   
                }
            },
        }).$mount('#app')

    </script>
</body>
</html>